<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新疆行知书</title>
<style>
*{/*初始化*/
	padding:0;
	margin:0;
	list-style:none;
}
h3{
 background-color:#BBDDFF;
 height:25px;
 line-height:25px;
 font-size:15px;
 color:#003973;
 text-align:left;
}
h3::before{
	content:"";
	display:inline-block;
	background-image:url(img/icon2.gif);
	background-size:100% 100%;
	width:5px;
	height:5px;
	margin:0 5px;
	margin-bottom:5px;
}
img{
	vertical-align:middle;
}
body{
	background-color:#2286C6;
}
#container{
	margin:0 auto;
	width:780px;
}
/*#container #top{
}
#container #top ul{
	background-image:url(img/button1.jpg);
	height:33px;
}
#container #top ul li{
	float:left;
	line-height:33px;
	margin:0 9px;
}
#container #top ul li a{
	color:#3973A2;
	
}*/
#container #top ul{
	overflow:auto;/*本例并没有实际效果。（由于Li浮动了，背景色无效（设置了就有效果））*/
}
#container #top ul li{
	float:left;
}
#container #top ul li a{
	display:block;
	background-image: url(img/button1.jpg);
	width:78px;
	height:33px;
	line-height:33px;
	text-align: center;
	font-family: "微软雅黑";
	color:#004A87;
	font-size:12px;
}
#container #top ul li a:hover{
	background-image: url(img/button2.jpg);
	color:#fff;
}

#container #main{
	margin:1px 0;
	height:620px;
}
#container #main .main_left{
	float:left;
	width:190px;
	border:5px solid white;
	text-align:center;
	background-color: #5EA6EB;
	/*padding-bottom: 3px;*/
	}
#container #main .main_left	.main_left_weather h4{
	background-image:url(img/weather.jpg);
	height:40px;
	line-height:40px;
	padding-left:20px;
	color:#fff;
	font-size:13px;
	font-family:'宋体';
	}
#container #main .main_left	.main_left_weather ul{
	padding:5px 0;
	background-color:#5EA6EB;
	}
#container #main .main_left	.main_left_weather ul li{
	color:#fff;
	font-size:13px;
	margin:3px;
	}
#container #main .main_left	.main_left_weather ul li::before{	
    content:"";
	display:inline-block;
	background-image:url(img/icon1.gif);
	background-size:100% 100%;
	width:5px;
	height:5px;
	margin:0 5px;
	margin-bottom:4px;
}
#container #main .main_left img{
    border:1px solid #FFF;
	margin:5px 8px;
}
#container #main .main_left img:hover{
    margin: 5px 0px 0px 5px;
}
#container #main .main_left p{
    font-size:13px;
	color:#fff;
	margin:3px 0;
}
#container #main .main_center{
	margin:0 1px;
	float:left;
	width:390px;
	border:5px solid white;
	background-color:#fff;
	padding-bottom: 3px;
	}
#container #main .main_center ul{
	margin:13px 5px;
		}
#container #main .main_center ul li{
	color:#004E8A;
	font-size:13px;
	margin:12px;
	}	
#container #main .main_center ul li::before{
	content:"";
	display:inline-block;
	background-image:url(img/icon1.gif);
	background-size:100% 100%;
	width:5px;
	height:5px;
	margin:0 5px;
	margin-bottom:3px
	}
#container #main .main_center .meijing img{
	border:1px solid #4AB0FF;
	margin:8px 3px;
	}
#container #main .main_right{
	float:left;
	width:168px;
	border:5px solid white;
	background-color: #5EA6EB;
	/*padding-bottom: 1px;*/
	}
#container #main .main_right ul{
	margin:13px 5px;
}
#container #main .main_right ul li{
	color:#fff;
	font-size:13px;
	border-bottom: 1px dashed #fff;
	padding:3px 0;
}
#container #main .main_right ul li::before{
	content:"";
	display:inline-block;
	background-image:url(img/icon1.gif);
	background-size:100% 100%;
	width:5px;
	height:5px;
	margin:0 5px;
	margin-bottom:4px
}
#container #main .main_right img{
	border:1px solid #fff;
	margin:5px 8px;
}
#container #main .main_right .binguan{
    margin:15px 0;
}
#container #footer{
	clear:both;
	border:5px solid white; 
}
#container #footer p{
	text-align:center;
	height:30px; 
	line-height:30px; 
	}
#container #footer p a{
	text-decoration:none;
	color:#fff;
	}
</style>
</head>

<body>
<div id="container">
 
  <div id="top">
  <img src="img/banner.jpg" />
  <ul>
  <li><a href="#">首页</a></li>
  <li><a href="#">新疆简介</a></li>
  <li><a href="#">风土人情</a></li>
  <li><a href="#">吃在新疆</a></li>
  <li><a href="#">路线选择</a></li>
  <li><a href="#">自助行</a></li>
  <li><a href="#">摄影摄像</a></li>
  <li><a href="#">游记情趣</a></li>
  <li><a href="#">资源下载</a></li>
  <li><a href="#">雁过留声</a></li>
  </ul>
  </div>

  <div id="main">
        <div class="main_left">
             <div class="main_left_weather">
             <h4>天气查询</h4>
             
             <ul>
             <li>乌鲁木齐 雷阵雨 20℃-31℃</li>
             <li>吐鲁番 多云转阴 20℃-28℃</li>
             <li>喀什 阵雨转多云 25℃-32℃</li>
             <li>库尔勒 阵雨转阴 21℃-28℃</li>
             <li>克拉马依 雷阵雨 26℃-30℃</li>
             </ul>
             </div>
             <h3>今日推荐</h3>
             <img src="img/tuijian1.jpg" /><p>喀纳斯河</p> 
             <img src="img/tuijian2.jpg" /><p>布尔津</p>
             <img src="img/tuijian3.jpg" /><p>天山之路</p> 
        
         </div>
        <div class="main_center">
        <img src="img/ghost.jpg" />
        <img src="img/picture_h1.gif" class="picture" />
        
        <div class="meijing">
        <img src="img/beauty1.jpg" />
        <img src="img/beauty2.jpg" />
        <img src="img/beauty3.jpg" />
        <img src="img/beauty4.jpg" />
        </div>
        
        <img src="img/route_h1.gif" />
        <ul>
        <li>吐鲁番--库尔勒--库车--路中--和田--喀什</li>
        <li>乌鲁木齐--天池--卡拉玛依--乌伦古湖--喀纳斯</li>
        <li>乌鲁木齐--奎屯--乔尔玛--那拉裴--巴音布鲁克</li>
        <li>乌鲁木齐--五彩城--将军隔壁--吉木萨尔</li>
        </ul>
        
        </div>
        <div class="main_right">
        <h3>新疆风光</h3>
         <img src="img/map1.jpg" />
         <img src="img/map2.jpg" />
        <h3>小吃推荐</h3>
        <ul>
        <li>17号抓饭</li>        
        <li>大盘鸡</li>
        <li>五一夜市</li>        
        <li>水果</li>        
        </ul>
        <h3 class="binguan">宾馆酒店</h3>
        <ul>
        <li>美丽华大饭店</li>        
        <li>海德大饭店</li>        
        <li>银都大饭店</li>       
        <li>鸿福大饭店</li>       
        <li>友好大饭店</li>    
        <li>棉麻宾馆</li>
        <li>电信宾馆</li>
        </ul>
        </div>
   </div>

   <div id="footer">
   <p>艾萨克 ©版权所有 <a href="#">demo@demo.com</a></p>
   </div>

</div>
</body>
</html>
